<template>
	<view class="all8">
		<view class="top" :style="{
			'background-image':$img('https://s4.ax1x.com/2022/01/27/7XMzqA.png')
		}">
			<view style="padding: 0 30rpx 30rpx 30rpx">
				<view style="text-align: right">
					<image @click="qy" style="margin-right: 20rpx;" class="top_1" src="@/static/img/qyzx.png" />
					<image @click="shezhi" class="top_1" src="@/static/img/sz3.png" />
				</view>
				<view class="top2">
					<view class="top_2_1">
						<text>{{info.nickname}}</text>
						<text>{{course}}</text>
					</view>
					<view class="top_2_1">
						<image @click="mygeren" :src="info.avatar" />
					</view>
				</view>
			</view>

			<view class="top3">
				<view class="top3_1" @click="cont('积分')">
					<text>积分:</text>
					<text>{{info.score}}</text>
				</view>
				<view class="top3_1" @click="cont('优惠券')">
					<text>优惠券:</text>
					<text>{{info.coupon}}</text>
				</view>
				<view class="top3_1" @click="cont('收藏')">
					<text>收藏:</text>
					<text>{{info.collect}}</text>
				</view>
			</view>
		</view>
		<view class="carp">
			<view class="carp_1">
				<view class="carp_1_1" @click="submit(item,1)" v-for="(item,index) in list">
					<image :src="item.img" style="width: 58rpx;height: 58rpx;" />
					<text>{{item.name}}</text>
				</view>

			</view>
		</view>
		<view class="carp carp2">
			<text class="carp_12">我的内容</text>
			<view class="carp_1">
				<view class="carp_1_1 carp_1_2" @click="submit(item,2)" v-for="(item,index) in list2">
					<image :src="item.img" style="width: 58rpx;height: 58rpx;" />
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>

		<view class="carp carp2">
			<text class="carp_12">我的服务</text>
			<view class="carp_1">
				<view class="carp_1_1 carp_1_2" @click="submit(item,3)" v-for="(item,index) in list3">
					<image :src="item.img" style="width: 58rpx;height: 58rpx;" />
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				list3: [{
						name: '帮助中心',
						img: require('@/static/img/geren/bzzx.png')
					},
					{
						name: '合作伙伴',
						img: require('@/static/img/geren/hzhb.png')
					},
				],
				list2: [{
						name: '学习中心',
						img: require('@/static/img/geren/xizx.png')
					},
					{
						name: '已购课程',
						img: require('@/static/img/geren/ygkc.png')
					},
					{
						name: '我的合同',
						img: require('@/static/img/geren/wdht.png')
					},
					{
						name: '足迹',
						img: require('@/static/img/geren/zj.png')
					},
					{
						name: '积分商城',
						img: require('@/static/img/geren/jfsc.png')
					},
					{
						name: '课程分享',
						img: require('@/static/img/geren/kcfx.png')
					},
					{
						name: '兑换中心',
						img: require('@/static/img/geren/dhzx.png')
					},
				],


				list: [{
						name: '待付款',
						img: require('@/static/img/geren/dfk.png')
					},
					{
						name: '待发货',
						img: require('@/static/img/geren/dfh.png')
					},
					{
						name: '待收货',
						img: require('@/static/img/geren/dsh.png')
					},
					{
						name: '已完成',
						img: require('@/static/img/geren/ywc.png')
					}
				],
			}
		},
		onLoad() {
			this.getinfo()
		},
		computed: {
			course() {
				let a = ''
				if (this.info.course == 0) {
					a = '无'
				} else if (this.info.course == 1) {
					a = '交付课'
				} else if (this.info.course == 2) {
					a = '普通'
				} else if (this.info.course == 3) {
					a = '峰会'
				} else if (this.info.course == 4) {
					a = '项目'
				}
				return a
			}
		},
		methods: {
			getinfo() {
				this.$api('usermsg/userMsg').then(res => {
					this.info = res.data
				})
			},
			cont(a) {
				if (a == '积分') {
					uni.navigateTo({
						url: './jfxq'
					})
				} else if (a == '优惠券') {
					uni.navigateTo({
						url: './wdkb'
					})
				} else {
					uni.navigateTo({
						url: './msc'
					})
				}
			},
			qy() {
				uni.navigateTo({
					url: './qyzx'
				})
			},
			mygeren() {
				uni.navigateTo({
					url: './jbzl'
				})
			},
			shezhi() {
				uni.navigateTo({
					url: './shezhi'
				})
			},
			submit(item, type) {
				if (type == 1) {
					uni.navigateTo({
						url: `./mydingdan`,
					})
					return
					switch (item.name) {
						case '待付款':
							uni.navigateTo({
								url: `./mydingdan`
							})
							break;
						case '待发货':
							代码块
							break;
						default:

					}
				} else if (type == 2) {
					switch (item.name) {
						case '学习中心':
							uni.navigateTo({
								url: `./studycore`
							})
							break;
						case '已购课程':
							uni.navigateTo({
								url: `./purchased`
							})
							break;
						case '我的合同':
							uni.navigateTo({
								url: `./contract`
							})
							break;
						case '足迹':
							uni.navigateTo({
								url: `./footprint`
							})
							break;
						case '积分商城':
							uni.navigateTo({
								url: `/pages/index/shopping/jifnshopping`
							})
							break;
						case '课程分享':
							uni.navigateTo({
								url: './kcfx'
							})
							break;
						case '兑换中心':
							uni.navigateTo({
								url: './dhzx'
							})
							break;
						default:
					}
				} else if (type == 3) {
					switch (item.name) {
						case '帮助中心':
							uni.navigateTo({
								url: './helpzx'
							})
							break;
						case '合作伙伴':
							uni.navigateTo({
								url: './hzhb'
							})
							break;
						default:
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.all8 {
		min-height: 1500rpx;
		background: #F6F6F6;

		.carp2 {
			.carp_12 {
				font-size: 34rpx;
				margin-left: 35rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #141414;
				opacity: 1;
			}
		}

		.carp_1 {
			display: flex;
			flex-wrap: wrap;

			.carp_1_2 {
				margin-top: 40rpx;
			}

			.carp_1_1 {
				text-align: center;
				width: 25%;
				// border: 1px solid black;
			}

			text {
				margin-top: 15rpx;
				display: block;
				text-align: center;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #141414;
				opacity: 1;
			}
		}

		.carp {
			width: 90%;
			border-radius: 8rpx;
			background-color: white;
			padding: 40rpx 0rpx 40rpx 0rpx;
			margin: auto;
			margin-top: 30rpx;

		}

		.top {
			position: relative;

			.top3 {
				display: flex;
				width: 100%;
				position: absolute;
				bottom: 0;
				justify-content: space-around;

				.top3_1 {
					display: flex;
					align-items: center;

					text:nth-of-type(1) {
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						opacity: 0.6;
					}

					text:nth-of-type(2) {
						font-size: 38rpx;
						font-family: HarmonyOS Sans;
						font-weight: bold;
						color: #333333;
						opacity: 1;
					}
				}
			}

			.top2 {
				display: flex;
				justify-content: space-between;

				.top_2_1 {
					margin-top: 50rpx;

					text:nth-of-type(2) {
						margin-top: 25rpx;
						background-image: url(https://s4.ax1x.com/2022/01/27/7XlSlF.png);
						background-size: 100% 100%;
						background-repeat: no-repeat;
						display: block;
						width: 120rpx;
						height: 42rpx;
						text-align: center;
						line-height: 42rpx;
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #F3AE0C;
						opacity: 1;

					}

					text:nth-of-type(1) {
						display: block;
						font-size: 42rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
						opacity: 1;
					}
				}

				.top_2_1 {
					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 100%;
					}
				}
			}

			background-size: 100% 100%;
			background-repeat: no-repeat;
			height: 360rpx;

			.top_1 {
				width: 50rpx;
				height: 50rpx;
				margin-top: 30rpx;
			}
		}
	}
</style>
